<template>
  <div>
   <div class="bigbox">
     <div class="header">
      <h1 @click="fun()">&lt;</h1>
      <h2>流量专区</h2>       
     </div>
     <div class="lunbotu">
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="img/yueimg/27.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/28.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/29.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/30.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/31.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/32.jpg"></van-swipe-item>
        <van-swipe-item><img src="img/yueimg/33.jpg"></van-swipe-item>
       </van-swipe>
     </div>
     <div class="suiding">
       <div class="suiding-con">
         <span>随订随用</span>丨
         <span>省心退订</span>丨
         <span>品类齐全</span>
       </div>
     </div>
     <div class="yiyong">
       <div class="yiyong-con">
         <span>***********</span>
         <span>通用流量已用</span>
         <span>99.99GB</span>
       </div>
     </div>
     <div class="dajia">
       <div class="dajia-con">
         <div class="dajia-con-a">
           <span>大家都在买</span>
           <span>15*******02订购了特惠包</span>
         </div>
         <div class="dajia-con-b">
           <div><img src="img/yueimg/117.jpg" alt=""><br>1元5GB包月</div>
           <div><img src="img/yueimg/118.jpg" alt=""><br>会员月月领</div>
           <div><img src="img/yueimg/119.jpg" alt=""><br>玩乐通行证</div>
           <div><img src="img/yueimg/120.jpg" alt=""><br>会员+15GB</div>
           <div><img src="img/yueimg/121.jpg" alt=""><br>会员+15GB</div>
           <div><img src="img/yueimg/122.jpg" alt=""><br>会员+15GB</div>
           <div><img src="img/yueimg/123.jpg" alt=""><br>12元7天包</div>
           <div><img src="img/yueimg/124.jpg" alt=""><br>1元追好剧</div>
           <div><img src="img/yueimg/125.jpg" alt=""><br>1元15GB包月</div>
         </div>
       </div>
     </div>
     <div class="yingji">
       <div class="yingji-con">
         <div class="yingji-con-a">
           <span>应急流量</span>
           <span>短时有效,随时补充</span>
         </div>
         <div class="yingji-con-b">
           <div><span>10元5GB</span><br><span>7日有效</span></div>
           <div><span>2元1GB</span><br><span>4小时有效</span></div>
           <div><span>5元3GB</span><br><span>4小时有效</span></div>
           <div><span>3元1GB</span><br><span>24小时有效</span></div>
           <div><span>5元2GB</span><br><span>24小时有效</span></div>
           <div><span>10元5GB</span><br><span>24小时有效</span></div>
         </div>
       </div>
     </div>
     <van-tabs class="fenlan" v-model="active">
       <van-tab title="特惠精选">
         <div class="tehui">
           <div class="tehui-con">
             <img src="img/yueimg/126.jpg" alt="">
             <img src="img/yueimg/127.jpg" alt="">
             <img src="img/yueimg/128.jpg" alt="">
             <img src="img/yueimg/129.jpg" alt="">
           </div>
         </div>
       </van-tab>
       <van-tab title="本地特惠">
         <div class="bendi">
           <div class="bendi-con">
             <img src="img/yueimg/130.jpg" alt="">
             <img src="img/yueimg/131.jpg" alt="">
           </div>
         </div>
       </van-tab>
       <van-tab title="随心视听">
         <div class="suixin">
           <div class="suixin-con">
             <img src="img/yueimg/132.jpg" alt="">
             <img src="img/yueimg/133.jpg" alt="">
           </div>
         </div>
       </van-tab>
       <van-tab title="随心玩乐">
         <div class="wanle">
           <div class="wanle-con">
             <img src="img/yueimg/134.jpg" alt="">
             <img src="img/yueimg/135.jpg" alt="">
           </div>
         </div>
       </van-tab>
     </van-tabs>
   </div>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.go(-1)
    }
  },
  data() {
    return {
      active: 2,
    }
  },
}
</script>

<style scoped>
.bigbox{
  overflow: hidden;
}

.header{
  width: 100%;
  background-color: white;
  height: 0.77rem;
  line-height: 0.77rem;
  position: fixed;
  border-bottom: 1PX solid gray;
  z-index: 9999;
}

.header h1,h2{
  float: left;
}

.header h2{
  margin-left:1.3rem;
}

.my-swipe{
  margin-top: 0.85rem;
  width: 3.33rem;
  height: 1.06rem;
  margin-left: 0.3rem;
  border-radius: 0.1rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe img{
  width: 100%;
  height: 100%;
}

.suiding{
  width: 100%;
}

.suiding .suiding-con{
  width: 3.05rem;
  margin: auto;
  font-size: 0.10rem;
  color: #d2d2d2;
  display: flex;
  justify-content: space-evenly;
}

.yiyong{
  width: 100%;
}

.yiyong .yiyong-con{
  width: 3.34rem;
  height: 0.48rem;
  margin: auto;
  border-radius: 0.1rem;
  line-height: 0.48rem;
}

.yiyong .yiyong-con span:nth-child(2){
  margin-left: 0.8rem;
  font-size: 0.12rem;
}

.yiyong .yiyong-con span:nth-child(3){
  font-size: 0.12rem;
  color: #39a9ed;
  margin-left: 0.1rem;
}

.dajia{
  width: 100%;
 
}

.dajia .dajia-con{
  width: 3.34rem;
  height: 3.60rem;
  background-color: #ebf5fe;
  margin: auto;
  border-radius: 0.1rem; 
  overflow: hidden;
}

.dajia .dajia-con .dajia-con-a{
  width: 3.04rem;
  height: 0.2rem;
  margin-top: 0.11rem;
}

.dajia .dajia-con .dajia-con-a span:nth-child(1){
  font-size: 0.16rem;

}

.dajia .dajia-con .dajia-con-a span:nth-child(2){
  margin-left: 0.85rem;
  font-size: 0.11rem;
  color: #8c96ac;
}

.dajia .dajia-con .dajia-con-b{
  width: 3.1rem;
  height: 3.04rem;
  margin: auto;
  margin-top: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  
}

.dajia .dajia-con .dajia-con-b div{
  width: 0.96rem;
  height: 0.96rem;
  background-color: white;
  text-align: center;
  font-size: 0.10rem;
}

.dajia .dajia-con .dajia-con-b img{
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.21rem;

}



.yingji{
  width: 100%;
  margin-top: 0.17rem;
}

.yingji .yingji-con{
  width: 3.34rem;
  height: 1.89rem;
  margin: auto;
  overflow: hidden;
}

.yingji .yingji-con .yingji-con-a{
  width: 3.07rem;
  height: 0.2rem;
  margin-top: 0.14rem;
  margin: auto;
}

.yingji .yingji-con .yingji-con-a span:nth-child(2){
  margin-left: 1.2rem;
  font-size: 0.12rem;
  color: #8c96ac;
}
.yingji .yingji-con .yingji-con-b{
  width: 3.11rem;
  height: 1.38rem;
  background-color: #39a9ed;
  margin: auto;
  margin-top: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.yingji .yingji-con .yingji-con-b div{
  width: 0.98rem;
  height: 0.61rem;
  background-color: #fafafe;
  text-align: center;
  line-height: 0.3rem;
}

.yingji .yingji-con .yingji-con-b div span:nth-child(1){
  color: #39a9ed;
}


.fenlan{
  width: 100%;
}

.fenlan div{
  width: 3.34rem;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.tehui{
  width: 100%;
}

.tehui .tehui-con{
  width: 3.28rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: auto;
}

.tehui .tehui-con img{
  width: 1.49rem;
  height: 1.49rem;
  margin-bottom: 0.1rem;
}

.bendi{
  width: 100%;
}

.bendi .bendi-con{
  width: 3.28rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: auto;
}

.bendi .bendi-con img{
  width: 1.49rem;
  height: 1.49rem;
  margin-bottom: 0.1rem;
}

.suixin{
  width: 100%;
}

.suixin .suixin-con{
  width: 3.28rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: auto;
}

.suixin .suixin-con img{
  width: 1.49rem;
  height: 1.49rem;
  margin-bottom: 0.1rem;
}

.wanle{
  width: 100%;
}

.wanle .wanle-con{
  width: 3.28rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: auto;
}

.wanle .wanle-con img{
  width: 1.49rem;
  height: 1.49rem;
  margin-bottom: 0.1rem;
}

</style>